<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
     <el-form-item label="稽核清单名称" prop="auditListName">
       <el-input
        v-model="queryParams.auditListName"
         placeholder="请输入稽核清单名称"
         clearable
         size="small"
         @keyup.enter.native="handleQuery"
       />
   </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['project:auditTypeInventory:add']"
        >新增</el-button>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

      <el-table v-loading="loading" :data="auditTypeInventoryList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" prop="auditId" />
      <el-table-column label="稽核清单名称" align="center" prop="auditListName" />
      <el-table-column label="稽核清单标志" align="center" prop="auditListFlag" />
      <el-table-column label="检查项" align="center" prop="checkItemNum" />
      <el-table-column label="版本更新日期" align="center" prop="updateTime" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['project:auditTypeInventory:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-search"
            @click="handlelookdate(scope.row)"
            v-hasPermi="['project:auditTypeInventory:edit']"
          >预览</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['project:auditTypeInventory:remove']" 
          >删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="在线稽核" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="small "
            type="success"
            icon="el-icon-circle-plus-outline"
            @click="handleTotal(scope.row)"
            v-hasPermi="['project:auditTypeInventory:edit']"
          >填报</el-button>
        </template>
      </el-table-column>
      <el-table-column label="统计" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="small "
            type="warning"
            icon="el-icon-pie-chart"
            @click="webclientlogin(scope.row)"
            v-hasPermi="['project:auditTypeInventory:edit']"
          >统计</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改稽核类型稽核清单对话框 -->
    <el-dialog v-loading="loading" :title="title" :visible.sync="open" width="750px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" :disabled="looktrue" label-width="120px">
      <el-row>
        <el-col :span="12">
        <el-form-item label="稽核清单名称" prop="auditListName">
          <el-input v-model="form.auditListName" placeholder="请输入稽核清单名称"  />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="稽核清单标志" prop="auditListFlag">
          <el-input v-model="form.auditListFlag" placeholder="请输入稽核清单标志" />
        </el-form-item>
        </el-col>
      </el-row>
        <el-form-item label="记录信息栏位">
          <el-checkbox label="电脑名称" v-model="form.computerName" false-label="0" true-label="1" @change="change"></el-checkbox>
          <el-checkbox label="电脑IP地址" v-model="form.computerIpAddress" false-label="0" true-label="1" @change="change"></el-checkbox>
          <el-checkbox label="电脑等级" v-model="form.computerLever" false-label="0" true-label="1" @change="change"></el-checkbox>
          <el-checkbox label="使用人姓名" v-model="form.userName" false-label="0" true-label="1" @change="change"></el-checkbox>
          <el-checkbox label="使用人工号" v-model="form.userEmployeeId" false-label="0" true-label="1" @change="change"></el-checkbox>
          <el-checkbox label="使用人部门" v-model="form.userDepartment" false-label="0" true-label="1" @change="change"></el-checkbox>
          <el-checkbox label="IpadSN" v-model="form.ipadsn" false-label="0" true-label="1" @change="change"></el-checkbox>
          <el-checkbox label="Ipad IP地址" v-model="form.ipadIpAddress" false-label="0" true-label="1" @change="change"></el-checkbox>
          <el-checkbox label="iMessage账号" v-model="form.imessageAccount" false-label="0" true-label="1" @change="change"></el-checkbox>
          <el-checkbox label="FTP账号" v-model="form.ftpAccount" false-label="0" true-label="1" @change="change"></el-checkbox>
          <el-checkbox label="FTP使用人" v-model="form.ftpUser" false-label="0" true-label="1" @change="change"></el-checkbox>
          <el-checkbox label="邮箱使用人" v-model="form.eUser" false-label="0" true-label="1" @change="change"></el-checkbox>
          <el-checkbox label="邮箱地址" v-model="form.eAddress" false-label="0" true-label="1" @change="change"></el-checkbox>
          <el-checkbox label="设备名称" v-model="form.devicename" false-label="0" true-label="1" @change="change"></el-checkbox>
          <el-checkbox label="Vlan号" v-model="form.vlanNum" false-label="0" true-label="1" @change="change"></el-checkbox>
          <el-checkbox label="稽核区域" v-model="form.auditArea" false-label="0" true-label="1" @change="change"></el-checkbox>
          <el-checkbox label="功能间" v-model="form.functionalArea" false-label="0" true-label="1" @change="change"></el-checkbox>
          <el-checkbox label="供应商" v-model="form.supplier" false-label="0" true-label="1" @change="change"></el-checkbox>
          <el-checkbox label="审核人" v-model="form.verifier" false-label="0" true-label="1" @change="change"></el-checkbox>
          <el-checkbox label="审核人工号" v-model="form.verifierId" false-label="0" true-label="1" @change="change"></el-checkbox>
          <el-checkbox label="稽核方式" v-model="form.auditMode" false-label="0" true-label="1" @change="change"></el-checkbox>
        </el-form-item>

        <el-divider content-position="center">稽核清单检查项关联信息</el-divider>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddAuditListAlci">添加</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteAuditListAlci">删除</el-button>
          </el-col>
        </el-row>
        <el-table :data="inspectionItemList" :row-class-name="rowAuditListAlciIndex" @selection-change="handleAuditListAlciSelectionChange" ref="auditListAlci">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="序号" align="center" prop="auditId" >
            <template scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="大类" align="center" prop="mainClass" />
           
          <el-table-column label="检查项类别" align="center" prop="checkItemCategory" />
          <el-table-column label="检查内容" align="center" prop="reviewContent" />
          <el-table-column label="修改"  align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope"  >
              <el-button
                type="primary"
                size="small"
                @click="delistchange(scope.row)"
              >修 改
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        
        
      </el-form>
      <div style="margin-top: 30px;margin-left: 550px">
      <el-button type="primary" @click="submitForm" :style="{ display: submit }">提 交</el-button>
      <el-button @click="cancel" :style="{ display: submit }">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="diatitle" :visible.sync="addEend" width="500px" append-to-body center>
      <el-form :model="addform" ref="addform" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="大类" prop="mainClass" >
              <el-select v-model="addform.mainClass" filterable allow-create placeholder="请选择或输入大类"
                        clearable :style="{width: '90%'}">  
                <el-option v-for="(item, index) in mainClassOptions" :key="index" :label="item"
                          :value="item" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="检查项类别" prop="checkItemCategory" >
              <el-select v-model="addform.checkItemCategory" filterable allow-create placeholder="请选择或输入检查项类别"
                        clearable :style="{width: '90%'}">  
                <el-option v-for="(item, index) in checkItemCategoryOptions" :key="index" :label="item"
                          :value="item" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="23">
            <el-form-item label="检查内容" prop="reviewContent">
              <el-input 
              type="textarea" 
              :rows="2"
              placeholder="请输入检查内容" 
              v-model="addform.reviewContent"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div style="margin-top: 30px;margin-left: 275px">
      <el-button type="primary" @click="addButton">提 交</el-button>
      <el-button @click="falseAd">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog v-loading="loading" :title="title" :visible.sync="totalopen" width="900px" append-to-body>
      <el-form :model="tbform" ref="tbform" :rules="rules" :inline="true" v-show="showSearch" label-width="160px">
        <el-form-item label="专案名称" prop="projectName">
          <el-input v-model="tbform.projectName" placeholder="请输入专案名称" />
        </el-form-item>
        <el-form-item label="稽核日期" prop="auditTime">
          <el-date-picker clearable size="small"
                          v-model="tbform.auditTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择稽核日期"
                          style="width: 205px;">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="稽核人工号" prop="auditNum">
          <el-select
                v-model="tbform.auditNum"
                :style="{width: '93%'}"
                @change="drichange"
                filterable
                remote
                reserve-keyword
                placeholder="请输入或获取工号"
                :remote-method="remoteMethodId"
                :loading="loading">
                <el-option
                  v-for="item in options4"
                  :key="item.empId"
                  :label="item.empId"
                  :value="item.empId">
                  <span style="float: left">{{item.empId}}</span>
                  <span style="float: right">{{item.empName}}</span>
                </el-option>
              </el-select>
        </el-form-item>
        <el-form-item label="稽核人" prop="auditName" style="margin-left: -16px">
          <el-select
                v-model="tbform.auditName"
                :style="{width: '93%'}"
                @change="drinchange"
                filterable
                remote
                reserve-keyword
                placeholder="请输入或获取姓名"
                :remote-method="remoteMethodName"
                :loading="loading">
                <el-option
                  v-for="item in options4"
                  :key="item.empId"
                  :label="item.empName"
                  :value="item.empName">
                  <span style="float: left">{{item.empId}}</span>
                  <span style="float: right">{{item.empName}}</span>
                </el-option>
              </el-select>
        </el-form-item>
        
        <el-form-item label="电脑名称" prop="computerName" v-if="avisibleLine">
          <el-input v-model="tbform.computerName"  placeholder="请输入电脑名称" />
        </el-form-item>
        <el-form-item label="电脑IP地址" prop="computerIpAddress" v-if="bvisibleLine" >
          <el-input v-model="tbform.computerIpAddress" placeholder="请输入电脑IP地址" />
        </el-form-item>
        <el-form-item label="电脑等级" prop="computerLever" v-if="cvisibleLine" >
          <el-input v-model="tbform.computerLever" placeholder="请输入电脑等级" />
        </el-form-item>
        <el-form-item label="使用人姓名" prop="userName" v-if="dvisibleLine"  >
              <el-select
                v-model="tbform.userName"
                :style="{width: '93%'}"
                @change="asnchange"
                filterable
                remote
                reserve-keyword
                placeholder="请输入或获取姓名"
                :remote-method="remoteMethodNames"
                :loading="loading">
                <el-option
                  v-for="item in options5"
                  :key="item.empId"
                  :label="item.empName"
                  :value="item.empName">
                  <span style="float: left">{{item.empId}}</span>
                  <span style="float: right">{{item.empName}}</span>
                </el-option>
              </el-select>
        </el-form-item>
        <el-form-item label="使用人工号" prop="userEmployeeId" v-if="evisibleLine"  >
          <el-select
                v-model="tbform.userEmployeeId"
                :style="{width: '93%'}"
                @change="asgchange"
                filterable
                remote
                reserve-keyword
                placeholder="请输入或获取工号"
                :remote-method="remoteMethodIds"
                :loading="loading">
                <el-option
                  v-for="item in options5"
                  :key="item.empId"
                  :label="item.empId"
                  :value="item.empId">
                  <span style="float: left">{{item.empId}}</span>
                  <span style="float: right">{{item.empName}}</span>
                </el-option>
              </el-select>
        </el-form-item>
        <el-form-item label="使用人部门" prop="userDepartment" v-if="fvisibleLine" style="margin-left: -16px">
          <el-input v-model="tbform.userDepartment" placeholder="请输入使用人部门" />
        </el-form-item>
        <el-form-item label="IPADSN" prop="ipadsn" v-if="gvisibleLine" >
          <el-input v-model="tbform.ipadsn" placeholder="请输入IPADSN" />
        </el-form-item>
        <el-form-item label="IPAD IP地址" prop="ipadIpAddress" v-if="hvisibleLine" >
          <el-input v-model="tbform.ipadIpAddress" placeholder="请输入IPADIP地址" />
        </el-form-item>
        <el-form-item label="iMessage账号" prop="imessageAccount" v-if="ivisibleLine" >
          <el-input v-model="tbform.imessageAccount" placeholder="请输入iMessage账号" />
        </el-form-item>
        <el-form-item label="FTP账号" prop="ftpAccount" v-if="jvisibleLine" >
          <el-input v-model="tbform.ftpAccount" placeholder="请输入FTP账号" />
        </el-form-item>
        <el-form-item label="FTP使用人" prop="ftpUser" v-if="kvisibleLine" >
          <el-input v-model="tbform.ftpUser" placeholder="请输入FTP使用人" />
        </el-form-item>
        <el-form-item label="邮箱地址" prop="eAddress" v-if="lvisibleLine" >
          <el-input v-model="tbform.eAddress" placeholder="请输入邮箱地址" />
        </el-form-item>
        <el-form-item label="邮箱使用人" prop="eUser" v-if="mvisibleLine" >
          <el-input v-model="tbform.eUser" placeholder="请输入邮箱使用人" />
        </el-form-item>
        <el-form-item label="设备名称" prop="devicename" v-if="nvisibleLine" >
          <el-input v-model="tbform.devicename" placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="VLAN号" prop="vlanNum" v-if="ovisibleLine" >
          <el-input v-model="tbform.vlanNum" placeholder="请输入VLAN号" />
        </el-form-item>
        <el-form-item label="稽核区域" prop="auditArea" v-if="pvisibleLine" >
          <el-input v-model="tbform.auditArea" placeholder="请输入稽核区域" />
        </el-form-item>
        <el-form-item label="功能间" prop="functionalArea" v-if="qvisibleLine" >
          <el-input v-model="tbform.functionalArea" placeholder="请输入功能间" />
        </el-form-item>
        <el-form-item label="供应商" prop="supplier" v-if="rvisibleLine" >
          <el-input v-model="tbform.supplier" placeholder="请输入供应商" />
        </el-form-item>
        <el-form-item label="审核人工号" prop="verifierId" v-if="tvisibleLine" >
          <el-select
                v-model="tbform.verifierId"
                :style="{width: '93%'}"
                @change="verchange"
                filterable
                remote
                reserve-keyword
                placeholder="请输入或获取工号"
                :remote-method="verMethodIds"
                :loading="loading">
                <el-option
                  v-for="item in options6"
                  :key="item.empId"
                  :label="item.empId"
                  :value="item.empId">
                  <span style="float: left">{{item.empId}}</span>
                  <span style="float: right">{{item.empName}}</span>
                </el-option>
              </el-select>
        </el-form-item>
        <el-form-item label="审核人" prop="verifier" v-if="svisibleLine" style="margin-left: -16px" >
          <el-select
                v-model="tbform.verifier"
                :style="{width: '93%'}"
                @change="venchange"
                filterable
                remote
                reserve-keyword
                placeholder="请输入或获取姓名"
                :remote-method="vernameMethodNames"
                :loading="loading">
                <el-option
                  v-for="item in options6"
                  :key="item.empId"
                  :label="item.empName"
                  :value="item.empName">
                  <span style="float: left">{{item.empId}}</span>
                  <span style="float: right">{{item.empName}}</span>
                </el-option>
              </el-select>
        </el-form-item>
        <el-form-item label="稽核方式" prop="auditMode" v-if="uvisibleLine" >
          <el-input v-model="tbform.auditMode" placeholder="请输入稽核方式" />
        </el-form-item>
      </el-form>

      <el-divider content-position="center">检查项</el-divider>
      <el-table
      :data="auditListAlciList"
      size="medium"
      @cell-mouse-enter="handleCellEnter"
      @cell-mouse-leave="handleCellLeave"
    >
      <el-table-column label="序号" prop="auditId" align="center" width="80" >
            <template scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
      <el-table-column label="大类" prop="mainClass" align="center" show-overflow-tooltip width="120" />
      <el-table-column label="检查项类别" prop="checkItemCategory" show-overflow-tooltip align="center" width="120" />
      <el-table-column label="检查内容" prop="reviewContent" show-overflow-tooltip align="center" width="120" />
      <el-table-column
        prop="whether"
        label="是否"
        width="135"
        show-overflow-tooltip
        align="center">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" onmouseover="this.title=this.value" v-model="scope.row.whether" placeholder="请输入内容"></el-input>
          <div class="item__txt">{{scope.row.whether}}</div>
        </div>
      </el-table-column>
      <el-table-column
        prop="auditDescribed"
        label="稽核描述"
        width="135"
        show-overflow-tooltip
        align="center">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" onmouseover="this.title=this.value" v-model="scope.row.auditDescribed" placeholder="请输入内容"></el-input>
          <div class="item__txt">{{scope.row.auditDescribed}}</div>
        </div>
      </el-table-column>
      <el-table-column
        prop="exceptionHdpt"
        label="异常处理部门"
        width="135"
        show-overflow-tooltip
        align="center">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" onmouseover="this.title=this.value" v-model="scope.row.exceptionHdpt" placeholder="请输入内容"></el-input>
          <div class="item__txt">{{scope.row.exceptionHdpt}}</div>
        </div>
      </el-table-column>
      <el-table-column
        prop="processDriName"
        label="处理DRI姓名"
        width="135"
        show-overflow-tooltip
        align="center">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" onmouseover="this.title=this.value" v-model="scope.row.processDriName" placeholder="请输入内容"></el-input>
          <div class="item__txt">{{scope.row.processDriName}}</div>
        </div>
      </el-table-column>
      <el-table-column
        prop="processDriId"
        label="处理DRI工号"
        width="135"
        show-overflow-tooltip
        align="center">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" onmouseover="this.title=this.value" v-model="scope.row.processDriId" placeholder="请输入内容"></el-input>
          <div class="item__txt">{{scope.row.processDriId}}</div>
        </div>
      </el-table-column>
      <el-table-column
        prop="completionTime"
        label="完成时间"
        width="135"
        show-overflow-tooltip
        align="center">
        <div class="item" slot-scope="scope">
          <el-date-picker clearable size="small"
                          class="item__input"
                          v-model="scope.row.completionTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择稽核日期"
                          style="width: 205px;">
          </el-date-picker>
          <div class="item__txt">{{scope.row.completionTime}}</div>
        </div>
      </el-table-column>
      <el-table-column
        prop="progress"
        label="解决进度"
        width="135"
        show-overflow-tooltip
        align="center">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" onmouseover="this.title=this.value" v-model="scope.row.progress" placeholder="请输入内容"></el-input>
          <div class="item__txt">{{scope.row.progress}}</div>
        </div>
      </el-table-column>
      <el-table-column
        prop="alciState"
        label="状态"
        width="135"
        show-overflow-tooltip
        align="center">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" onmouseover="this.title=this.value" v-model="scope.row.alciState" placeholder="请输入内容"></el-input>
          <div class="item__txt">{{scope.row.alciState}}</div>
        </div>
      </el-table-column>
      <el-table-column
        prop="budWrite"
        label="是否为BUD拟定"
        width="135"
        show-overflow-tooltip
        align="center">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" onmouseover="this.title=this.value" v-model="scope.row.budWrite" placeholder="请输入内容"></el-input>
          <div class="item__txt">{{scope.row.budWrite}}</div>
        </div>
      </el-table-column>
      <el-table-column
        prop="signArpaAgreement"
        label="是否签署ARPA协议"
        width="135"
        show-overflow-tooltip
        align="center">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" onmouseover="this.title=this.value" v-model="scope.row.signArpaAgreement" placeholder="请输入内容"></el-input>
          <div class="item__txt">{{scope.row.signArpaAgreement}}</div>
        </div>
      </el-table-column>
      <el-table-column
        prop="uploadListing"
        label="上传清单"
        width="135"
        show-overflow-tooltip
        align="center">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" onmouseover="this.title=this.value" v-model="scope.row.uploadListing" placeholder="请输入内容"></el-input>
          <div class="item__txt">{{scope.row.uploadListing}}</div>
        </div>
      </el-table-column>
      <el-table-column
        prop="whetherDesensitization"
        label="是否脱敏"
        width="135"
        show-overflow-tooltip
        align="center">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" onmouseover="this.title=this.value" v-model="scope.row.whetherDesensitization" placeholder="请输入内容"></el-input>
          <div class="item__txt">{{scope.row.whetherDesensitization}}</div>
        </div>
      </el-table-column>
      <el-table-column
        prop="minimizeGiving"
        label="是否最小化给予"
        width="135"
        show-overflow-tooltip
        align="center">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" onmouseover="this.title=this.value" v-model="scope.row.minimizeGiving" placeholder="请输入内容"></el-input>
          <div class="item__txt">{{scope.row.minimizeGiving}}</div>
        </div>
      </el-table-column>
      <el-table-column
        prop="imageFileContent"
        label="图档内容"
        width="135"
        show-overflow-tooltip
        align="center">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" onmouseover="this.title=this.value" v-model="scope.row.imageFileContent" placeholder="请输入内容"></el-input>
          <div class="item__txt">{{scope.row.imageFileContent}}</div>
        </div>
      </el-table-column>
      <el-table-column
        prop="uploadFigure"
        label="传图目的"
        width="135"
        show-overflow-tooltip
        align="center">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" onmouseover="this.title=this.value" v-model="scope.row.uploadFigure" placeholder="请输入内容"></el-input>
          <div class="item__txt">{{scope.row.uploadFigure}}</div>
        </div>
      </el-table-column>
      <el-table-column
        prop="anyViolation"
        label="有无违规"
        width="135"
        show-overflow-tooltip
        align="center">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" onmouseover="this.title=this.value" v-model="scope.row.anyViolation" placeholder="请输入内容"></el-input>
          <div class="item__txt">{{scope.row.anyViolation}}</div>
        </div>
      </el-table-column>
      <el-table-column
        prop="anIllegalProject"
        label="违规项目"
        width="135"
        show-overflow-tooltip
        align="center">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" onmouseover="this.title=this.value" v-model="scope.row.anIllegalProject" placeholder="请输入内容"></el-input>
          <div class="item__txt">{{scope.row.anIllegalProject}}</div>
        </div>
      </el-table-column>
      <el-table-column
        prop="approach"
        label="处理办法"
        width="135"
        show-overflow-tooltip
        align="center">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" onmouseover="this.title=this.value" v-model="scope.row.approach" placeholder="请输入内容"></el-input>
          <div class="item__txt">{{scope.row.approach}}</div>
        </div>
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        width="135"
        show-overflow-tooltip
        align="center">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" onmouseover="this.title=this.value" v-model="scope.row.remark" placeholder="请输入内容"></el-input>
          <div class="item__txt">{{scope.row.remark}}</div>
        </div>
      </el-table-column>
    </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submittbForm">提 交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listAuditTypeInventory, 
          getAuditTypeInventory, 
          delAuditTypeInventory, 
          addAuditTypeInventory, 
          updateAuditTypeInventory,
          uploudAuditTypeInventory, 
          exportAuditTypeInventory,
          auditTypeInventory,
          tbAuditTypeInventory } from "@/api/project/auditTypeInventory";
import { listEmpByKey } from "@/api/mine/securityAuditMatter";

export default {
  data() {
    return {
      submit: "",
      avisibleLine: true,
      bvisibleLine: true,
      cvisibleLine: true,
      dvisibleLine: true,
      evisibleLine: true,
      fvisibleLine: true,
      gvisibleLine: true,
      hvisibleLine: true,
      ivisibleLine: true,
      jvisibleLine: true,
      kvisibleLine: true,
      lvisibleLine: true,
      mvisibleLine: true,
      nvisibleLine: true,
      ovisibleLine: true,
      pvisibleLine: true,
      qvisibleLine: true,
      rvisibleLine: true,
      svisibleLine: true,
      tvisibleLine: true,
      uvisibleLine: true,
      looktrue: false,
      auditId: "1",
      index: null,
      inspectionID: '',
      value3: '',
      reviewContent: '',
      addEend: false,
      diatitle: "",
      totalopen: false,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedAuditListAlci: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 稽核类型稽核清单表格数据
      auditTypeInventoryList: [],
      auditTypeInventoryListTotal: [],
      // 稽核清单检查项关联表格数据
      inspectionItemList: [],
      //稽核清单信息栏位
      informationFieldList:[],
      //稽核清单信息栏位关联
      auditListCastList:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        auditListName: null,
        checkItemNum: null,
        createName: null,
        updateName: null,
        createNum: null,
        updateNum: null
      },
      // 表单参数
      form: {
      },
      tbform: {
        auditListName: null,
        auditListFlag: null,
        auditListAlciList: []
      },
      // 表单校验
      rules: {
        auditListName: [
          {required: true, message: "稽核清单名称不能为空", trigger: "blur"}
        ],
        auditListFlag: [
          {required: true, message: "稽核清单标志不能为空", trigger: "blur"}
        ],
        mainClass: [
          {required: true, message: "大类不能为空", trigger: "blur"}
        ],
        checkItemCategory: [
          {required: true, message: "检查项类别不能为空", trigger: "blur"}
        ],
        reviewContent: [
          {required: true, message: "检查内容不能为空", trigger: "blur"}
        ],
        projectName: [
          {required: true, message: "专案名称不能为空", trigger: "blur"}
        ],
        auditTime: [
          {required: true, message: "稽核日期不能为空", trigger: "blur"}
        ],
        auditName: [
          {required: true, message: "稽核人不能为空", trigger: "blur"}
        ],
        auditNum: [
          {required: true, message: "稽核人工号不能为空", trigger: "blur"}
        ],
        computerName: [
          {required: true, message: "电脑名称不能为空", trigger: "blur"}
        ],
        computerIpAddress: [
          {required: true, message: "电脑IP地址不能为空", trigger: "blur"}
        ],
        computerLever: [
          {required: true, message: "电脑等级不能为空", trigger: "blur"}
        ],
        userName: [
          {required: true, message: "使用人姓名不能为空", trigger: "blur"}
        ],
        userEmployeeId: [
          {required: true, message: "使用人工号不能为空", trigger: "blur"}
        ],
        userDepartment: [
          {required: true, message: "使用人部门不能为空", trigger: "blur"}
        ],
        ipadsn: [
          {required: true, message: "IPADSN不能为空", trigger: "blur"}
        ],
        ipadIpAddress: [
          {required: true, message: "IPAD IP地址不能为空", trigger: "blur"}
        ],

        imessageAccount: [
          {required: true, message: "iMess？、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、age账号不能为空", trigger: "blur"}
        ],
        ftpAccount: [
          {required: true, message: "FTP账号不能为空", trigger: "blur"}
        ],
        ftpUser: [
          {required: true, message: "FTP使用人不能为空", trigger: "blur"}
        ],
        eAddress: [
          {required: true, message: "邮箱地址不能为空", trigger: "blur"}
        ],
        eUser: [
          {required: true, message: "邮箱使用人不能为空", trigger: "blur"}
        ],
        devicename: [
          {required: true, message: "设备名称不能为空", trigger: "blur"}
        ],
        vlanNum: [
          {required: true, message: "VLAN号不能为空", trigger: "blur"}
        ],
        auditArea: [
          {required: true, message: "稽核区域不能为空", trigger: "blur"}
        ],
        functionalArea: [
          {required: true, message: "功能间不能为空", trigger: "blur"}
        ],
        supplier: [
          {required: true, message: "供应商不能为空", trigger: "blur"}
        ],
        verifier: [
          {required: true, message: "审核人不能为空", trigger: "blur"}
        ],
        verifierId: [
          {required: true, message: "审核人工号不能为空", trigger: "blur"}
        ],
        auditMode: [
          {required: true, message: "稽核方式不能为空", trigger: "blur"}
        ]
      },
      addform: {
        
      },
      mainClassOptions: [],
      checkItemCategoryOptions: [],
      
      // 表格数据
      auditListAlciList: [],
      // 需要编辑的属性
      editProp: ['whether', 
                'auditDescribed', 
                'exceptionHdpt',
                'processDriName',
                'processDriId',
                'completionTime',
                'progress',
                'alciState',
                'budWrite',
                'signArpaAgreement',
                'uploadListing',
                'whetherDesensitization',
                'minimizeGiving',
                'imageFileContent',
                'uploadFigure',
                'anyViolation',
                'anIllegalProject',
                'approach',
                'remark'],
      options4: [],
      options5: [],
      options6: []
    };
  },
  created() {
    this.getList();
    this.getMainClassList();
    this.getcheckItemCategoryList();
  },
  computed: {
    foodLabel () {
      return (val) => {
        return this.options.find(o => o.value === val).label
      }
    }
  },
  methods: {
    /** 鼠标移入cell */
    handleCellEnter (row, column, cell, event) {
      const property = column.property
      if (this.editProp.includes(property)) {
        cell.querySelector('.item__input').style.display = 'block'
        cell.querySelector('.item__txt').style.display = 'none'
      }
    },
    /** 鼠标移出cell */
    handleCellLeave (row, column, cell, event) {
      const property = column.property
      if (this.editProp.includes(property)) {
        cell.querySelector('.item__input').style.display = 'none'
        cell.querySelector('.item__txt').style.display = 'block'
      }
    },
    //统计按钮
        webclientlogin(row) {
        const auditListName = row.auditListName
        let routeData = this.$router.resolve({ path: '/webclient', query: {  auditListName: row.auditListName } });
        window.open(routeData.href, '_blank');
        },


    /** 查询稽核类型稽核清单列表 */
    getList() {
      this.loading = true;
      listAuditTypeInventory(this.queryParams).then(response => {
        this.auditTypeInventoryList = response.rows;
        this.total = response.total
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.totalopen = false;
      this.open = false;
      this.reset();
      this.tbreset();
    },
    // 表单重置
    reset() {
      this.form = {
        auditListName: null,
        auditListFlag: null,
        computerName: "0",
        computerIpAddress: "0",
        userName: "0",
        userEmployeeId: "0",
        userDepartment: "0",
        computerLever: "0",
        ipadsn: "0",
        ipadIpAddress: "0",
        imessageAccount: "0",
        ftpAccount: "0",
        ftpUser: "0",
        eUser: "0",
        eAddress: "0",
        devicename: "0",
        vlanNum: "0",
        auditArea: "0",
        functionalArea: "0",
        supplier: "0",
        verifier: "0",
        auditMode: "0",
        verifierId: "0"
      };
      this.inspectionItemList = [];
      this.resetForm("form");
    },
    //检查项表单重置
    addreset() {
      this.addform = {
        mainClass: '',
        checkItemCategory: '',
        reviewContent: ''
      };
      this.resetForm("addform");
    },
    
    tbreset(){
      this.tbform = {
        projectName: '',
        auditTime: '',
        auditName: '',
        auditNum: '',
        computerName: '',
        computerIpAddress: '',
        computerLever: '',
        userName: '',
        userEmployeeId: '',
        userDepartment: '',
        ipadsn: '',
        ipadIpAddress: '',
        imessageAccount: '',
        ftpAccount: '',
        ftpUser: '',
        eAddress: '',
        eUser: '',
        devicename: '',
        vlanNum: '',
        auditArea: '',
        functionalArea: '',
        supplier: '',
        verifier: '',
        verifierId: '',
        auditMode: '',
        unitId: ''
      }
      this.resetForm("tbform");
    },
    //获取大类下拉框
    getMainClassList() {
      this.loading = true;
      auditTypeInventory().then(response => {
        for(var i = 0;i<response.length;i ++){
          this.mainClassOptions.push(response[i].mainClass);
        }
        for (var i = 0; i < this.mainClassOptions.length;i ++) {
            for (let j = i + 1; j < this.mainClassOptions.length;j ++) {
                if (this.mainClassOptions[i] == this.mainClassOptions[j]) {
                    this.mainClassOptions.splice(j, 1);
                    j--;
                }
            }
        }
        this.loading = false;
      });
    },
    //获取检查项类别下拉框
    getcheckItemCategoryList() {
      this.loading = true;
      auditTypeInventory().then(response => {
        for(var i = 0;i<response.length;i ++){
          this.checkItemCategoryOptions.push(response[i].checkItemCategory);
        }
        for (var i = 0; i < this.checkItemCategoryOptions.length;i ++) {
            for (let j = i + 1; j < this.checkItemCategoryOptions.length;j ++) {
                if (this.checkItemCategoryOptions[i] == this.checkItemCategoryOptions[j]) {
                    this.checkItemCategoryOptions.splice(j, 1);
                    j--;
                }
            }
        }
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
    },
    /** 多选框选中数据*/
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.auditId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    drinchange(val){
      for(var i = 0;i<this.options4.length;i++){
        if(this.options4[i].empName == val){
          this.tbform.auditNum = this.options4[i].empId;
        }
      }
    },
    drichange(val){
      for(var i = 0;i<this.options4.length;i++){
        if(this.options4[i].empId == val){
          this.tbform.auditName = this.options4[i].empName;
        }
      }
    },
    asgchange(val){
      for(var i = 0;i<this.options5.length;i++){
        if(this.options5[i].empId == val){
          this.tbform.userName = this.options5[i].empName ;
          this.tbform.userDepartment = this.options5[i].unitName;
          this.tbform.unitId = this.options5[i].unitId;
        }
      }
    },
    asnchange(val){
      for(var i = 0;i<this.options5.length;i++){
        if(this.options5[i].empName == val){
          this.tbform.userEmployeeId = this.options5[i].empId;
          this.tbform.userDepartment = this.options5[i].unitName;
          this.tbform.unitId = this.options5[i].unitId;
        }
      }
    },
    verchange(val){
      for(var i = 0;i<this.options6.length;i++){
        if(this.options6[i].empId == val){
          this.tbform.verifier = this.options6[i].empName;
        }
      }
    },
    venchange(val){
      for(var i = 0;i<this.options6.length;i++){
        if(this.options6[i].empName == val){
          this.tbform.verifierId = this.options6[i].empId;
        }
      }
    },
    remoteMethodName(query) {
      if(query.length >= 2&&query.length <= 4){
        listEmpByKey(query).then(response => {
          this.options4 = response.data;
          
        })
      }
    },
    //DRI人员id获取姓名
    remoteMethodId(query) {
      if(query.length >= 7){
        listEmpByKey(query).then(response => {
          this.options4 = response.data;
          console.log(response)
        })
      }
    },
    remoteMethodIds(query) {
      if(query.length >= 7){
        listEmpByKey(query).then(response => {
          this.options5 = response.data;
        })
      }
    },
    remoteMethodNames(query) {
      if(query.length >= 2&&query.length <= 4){
        listEmpByKey(query).then(response => {
          this.options5 = response.data;
        })
      }
    },
    verMethodIds(query) {
      if(query.length >= 7){
        listEmpByKey(query).then(response => {
          this.options6 = response.data;
        })
      }
    },
    vernameMethodNames(query) {
      if(query.length >= 2&&query.length <= 4){
        listEmpByKey(query).then(response => {
          this.options6 = response.data;
        })
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.submit = ""
      this.getMainClassList();
      this.getcheckItemCategoryList();
      this.open = true;
      this.title = "添加稽核类型稽核清单";
      this.looktrue = false
      this.loading = true
    },
    //修改新增检查项
    delistchange(row) {
      this.loading = true
      this.addEend = true;
      if(this.$refs.addform){
        this.$refs.addform.clearValidate();
      }
      this.addform = row;
      for(var i = 0;i<this.inspectionItemList.length,i++;){
        if(this.inspectionItemList[i].index == row.index){
          this.inspectionItemList[i].splice(i,1,1,this.addform)
        }
      }
      this.loading = false
    },
    /** 填报操作 */
    handleTotal(row) {
      this.tbreset();
      this.loading = true
      this.totalopen = true;
      this.title = "在线稽核填报";
      const auditId = row.auditId || this.ids
      getAuditTypeInventory(auditId).then(response =>{
        this.auditListAlciList = response.data.inspectionItemList
        this.tbform.auditListName = response.data.auditListName
        this.tbform.auditListFlag = response.data.auditListFlag
        if(response.data.computerName == '0'){
          this.avisibleLine = false
        }else{
          this.avisibleLine = true
        }
        if(response.data.computerIpAddress == '0'){
          this.bvisibleLine = false
        }else{
          this.bvisibleLine = true
        }
        if(response.data.computerLever == '0'){
          this.cvisibleLine = false
        }else{
          this.cvisibleLine = true
        }
        if(response.data.userName == '0'){
          this.dvisibleLine = false
        }else{
          this.dvisibleLine = true
        }
        if(response.data.userEmployeeId == '0'){
          this.evisibleLine = false
        }else{
          this.evisibleLine = true
        }
        if(response.data.userDepartment == '0'){
          this.fvisibleLine = false
        }else{
          this.fvisibleLine = true
        }
        if(response.data.ipadsn == '0'){
          this.gvisibleLine = false
        }else{
          this.gvisibleLine = true
        }
        if(response.data.ipadIpAddress == '0'){
          this.hvisibleLine = false
        }else{
          this.hvisibleLine = true
        }
        if(response.data.imessageAccount == '0'){
          this.ivisibleLine = false
        }else{
          this.ivisibleLine = true
        }
        if(response.data.ftpAccount == '0'){
          this.jvisibleLine = false
        }else{
          this.jvisibleLine = true
        }
        if(response.data.ftpUser == '0'){
          this.kvisibleLine = false
        }else{
          this.kvisibleLine = true
        }
        if(response.data.eAddress == '0'){
          this.lvisibleLine = false
        }else{
          this.lvisibleLine = true
        }
        if(response.data.eUser == '0'){
          this.mvisibleLine = false
        }else{
          this.mvisibleLine = true
        }
        if(response.data.devicename == '0'){
          this.nvisibleLine = false
        }else{
          this.nvisibleLine = true
        }
        if(response.data.vlanNum == '0'){
          this.ovisibleLine = false
        }else{
          this.ovisibleLine = true
        }
        if(response.data.auditArea == '0'){
          this.pvisibleLine = false
        }else{
          this.pvisibleLine = true
        }
        if(response.data.functionalArea == '0'){
          this.qvisibleLine = false
        }else{
          this.qvisibleLine = true
        }
        if(response.data.supplier == '0'){
          this.rvisibleLine = false
        }else{
          this.rvisibleLine = true
        }
        if(response.data.verifier == '0'){
          this.svisibleLine = false
        }else{
          this.svisibleLine = true
        }
        if(response.data.verifierId == '0'){
          this.tvisibleLine = false
        }else{
          this.tvisibleLine = true
        }
        if(response.data.auditMode == '0'){
          this.uvisibleLine = false
        }else{
          this.uvisibleLine = true
        }
      })
      this.loading = false
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.submit = ""
      this.looktrue = false
      this.getMainClassList();
      this.getcheckItemCategoryList();
      const auditId = row.auditId || this.ids
      this.open = true;
      this.title = "修改稽核类型稽核清单";
       getAuditTypeInventory(auditId).then(response => {
         this.form = response.data;
         this.inspectionItemList = response.data.inspectionItemList;  
       });
    },
    //预览按钮操作
    handlelookdate(row) {
      this.looktrue = true
      this.submit = "none"
      this.reset();
      const auditId = row.auditId || this.ids
      this.open = true;
      this.title = "预览稽核类型稽核清单";
       getAuditTypeInventory(auditId).then(response => {
         this.form = response.data;
         this.inspectionItemList = response.data.inspectionItemList;  
       });
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.inspectionItemList = this.inspectionItemList;
          if (this.form.auditId != null) {
            updateAuditTypeInventory(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addAuditTypeInventory(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    //填报提交
    
    submittbForm(){
      this.$refs["tbform"].validate(valid => {
        if (valid) {
          this.tbform.auditListAlciList = this.auditListAlciList
          tbAuditTypeInventory(this.tbform).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.totalopen = false;
              this.getList();
          });
        }
      });
    },

    //添加检查项确定按钮
    addButton(){
      this.$refs["addform"].validate((valid) =>{
        if(valid){
          if(this.addform.index == undefined){
            let tempList = [];
            tempList.push(this.addform);
            this.$modal.msgSuccess("添加成功");
            this.inspectionItemList.push(...tempList)
          }else{
            for(var i = 0;i<this.inspectionItemList.length,i++;){
              if(this.inspectionItemList[i].index == this.addform.index){
                this.inspectionItemList[i].splice(i,1,1,this.addform)
              }
            }
            this.$modal.msgSuccess("修改成功");
          }
        }else {
            return false;
        }
      this.addEend = false;
      })
    },
    //添加检查项取消按钮
    falseAd(){
      this.addEend = false
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const auditIds = row.auditId || this.ids;
      this.$modal.confirm('是否确认删除稽核类型稽核清单编号为"' + auditIds + '"的数据项？').then(function() {
        return delAuditTypeInventory(auditIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 稽核清单检查项关联序号 */
    rowAuditListAlciIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },

    /**信息栏位序号 */
    rowInformationFieldIndex({ row,rowIndex }){
      row.index = rowIndex + 1;
    },

    /**稽核类型稽核清单信息栏位关联表序号*/
    rowAuditListCastIndex({ row,rowIndex }){
      row.index = rowIndex + 1;
    },

    /** 稽核清单检查项关联
     添加按钮操作 */
    handleAddAuditListAlci() {
      this.addEend = true;
      this.diatitle = "添加检查项"
      this.addform = {};
    },
    /** 稽核清单检查项关联
     删除按钮操作 */
    handleDeleteAuditListAlci() {
      if (this.checkedAuditListAlci.length == 0) {
        this.$modal.msgError("请先选择要删除的稽核清单检查项关联数据");
      } else {
        const inspectionItemList = this.inspectionItemList;
        const checkedAuditListAlci = this.checkedAuditListAlci;
        this.inspectionItemList = inspectionItemList.filter(function(item) {
          return checkedAuditListAlci.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handleAuditListAlciSelectionChange(selection) {
      this.checkedAuditListAlci = selection.map(item => item.index)
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$modal.confirm('是否确认导出所有稽核类型稽核清单数据项？').then(() => {
        this.exportLoading = true;
        return exportAuditTypeInventory(queryParams);
      }).then(response => {
        this.$download.name(response.msg);
        this.exportLoading = false;
      }).catch(() => {});
    }
  }
};
</script>
<style lang='scss'>
  .item{
    .item__input{
      display: none;
      width: 120px;
      .el-input__inner{
        height: 45px!important;
      }
      .el-input__suffix{
        i{
          font-size: 50px !important;
          line-height: 26px !important;
        }
      }
    }
    .item__txt{
      box-sizing: border-box;
      line-height: 20px;
      padding:5 55px;
    }
  }
</style>

